<template>
  <div class="plantSelect">
    <el-select @change="categoryChange" v-model="plantPageParam.categoryId" class="selectItem" placeholder="请选择类群"
      clearable>
      <el-option v-for="item in categoryOptions" :label="item.categoryName" :value="item.categoryId" />
    </el-select>
    <el-cascader @change="familyChange" v-model="plantPageParam.familyIds" :options="familyList" :props="props1"
      placeholder="请选择科属" clearable />
    <el-select style="margin-left: 20px;" placeholder="请选择种名" clearable>

    </el-select>
  </div>
  <el-empty v-if="pageTotal === 0" description="抱歉没有找到相关的作品" />
  <el-space wrap>
    <el-card v-for="(item, index) in plantList" :body-style="{ padding: '0px' }" class="plantItem"
      @click="toDetail(item.plantId)">
      <img :src="item.plantPicture" class="image" />
      <div style="padding: 14px">
        <span>{{ item.plantName }}</span>
        <el-tag style="margin-left: 10px;" :type="item.userName === '管理员' ? 'success' : ''">{{ item.userName }}</el-tag>
        <div class="bottom">
          <span class="time">{{ item.address }}</span>
          <span class="author">{{ formatterDate(item.createTime) }}</span>
        </div>
      </div>
    </el-card>
  </el-space>
  <div class="pageBlock">
    <el-pagination v-model:current-page="plantPageParam.currentPage" v-model:page-size="plantPageParam.pageSize"
      :page-sizes="[15, 25, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="pageTotal"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
</template>

<script setup lang="ts">
import { usePlantListApi } from '@/api/plant/plant';
import { ref, reactive, onMounted, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router';
import { useCategoryListApi, useFamilyTreeApi } from '@/api/plant/category'
import { useRequest } from 'vue-request';
import { formatterDate } from '@/util/dateFormat';

const router = useRouter()
const route = useRoute()

const pageParam = reactive({
  currentPage: 1,
  pageSize: 1000
})
const familyList = reactive([])

const props1 = {
  expandTrigger: 'hover' as const,
  checkStrictly: true,
  value: 'familyId',
  label: 'familyName',
  children: 'child',
}

const { data } = useRequest(useCategoryListApi(pageParam))
const categoryOptions = computed(() => {
  return data.value?.data || []
})
const categoryChange = async (val: any) => {
  query()
  if (val !== '') {
    familyList.length = 0
    const { data } = await useFamilyTreeApi(val)
    Object.assign(familyList, data)
  } else {
    familyList.length = 0
  }
}
const familyChange = () => {
  query()
}

const plantPageParam = reactive<{
  currentPage: number,
  pageSize: number,
  categoryId: any,
  familyIds: string[],
}>({
  currentPage: 1,
  pageSize: 15,
  categoryId: '',
  familyIds: [],
})

const pageTotal = ref(0)
const plantList = ref()


const query = async () => {
  const { data, total } = await usePlantListApi(plantPageParam)
  pageTotal.value = total
  plantList.value = data
}
onMounted(() => {
  const categoryId = route.query.categoryId
  plantPageParam.categoryId = categoryId
  if (categoryId) {
    categoryChange(categoryId)
  } else {
    query()
  }
})

function handleSizeChange() {
  query()
}
function handleCurrentChange() {
  query()
}

const toDetail = (data: any) => {
  sessionStorage.removeItem("navigation_index")
  router.push({ name: 'detail', params: { id: data } })
}

</script>

<style lang="scss" scoped>
.time {
  font-size: 12px;
  color: #999;
}

.author {
  font-size: 12px;
  color: #414141;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button {
  padding: 0;
  min-height: auto;
}

.image {
  width: 100%;
  height: 200px;
  display: block;
}

.plantItem {
  cursor: pointer;
  width: 286px;
}

.plantSelect {
  height: 50px;
  line-height: 50px;
  padding: 20px;
  margin-bottom: 10px;
  border: 1px solid #efefef;
  background-color: #fff;
}

.selectItem {
  margin-right: 20px;
}

.pageBlock {
  text-align: center;
  margin-top: 20px;
  margin-left: 530px;
}
</style>